<!-- 使用 type="home" 属性设置首页 -->
<route type="home" lang="json">
{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "首页",
    "componentPlaceholder": {
      "base-charts": "view"
    }
  },

  "name": "home"
}
</route>

<template>
  <div class="w-100% h-100%">
    <div class="w-100% h-300rpx">
      <BaseCharts :options="options" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import BaseCharts from '@/echarts/BaseCharts.vue';

const options = ref({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    show: false,
    orient: 'vertical',
    left: 'left',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 0, name: 'Email' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },

      label: {
        normal: {
          show: true,
          position: 'inner', // 数值显示在内部
          formatter: '{d}%', // 格式化数值百分比输出
        },
      },
    },
  ],
});
</script>

<style lang="scss" scoped></style>
